<template>
  <div class="approval-node-info">
    <div
      v-for="(node, index) in nodes"
      :key="index"
      class="node-item"
    >
      <!-- 左侧时间线 -->
      <div class="timeline">
        <template v-if="!node.isUserNode">
          <div class="dot relative" :class="{ active: isNodeCompleted(node) }">
            <i class="el-icon-s-check" />
            <div v-if="node.node_status" class="tips-icon">
              <i
                v-if="node.node_status === 'approved'"
                class="el-icon-success success"
              />
              <i
                v-if="node.node_status === 'wait'"
                class="el-icon-remove waiting"
              />
              <i
                v-if="node.node_status === 'refuse'"
                class="el-icon-error error"
              />
            </div>
          </div>
        </template>

        <template v-else>
          <div class="dot relative" :class="{ active: isNodeCompleted(node) }">
            <img
              v-if="node.avatar"
              :src="node.avatar"
              class="avatar"
            >
            <div
              v-else
              class="text-avatar"
            >
              {{ getFirstChar(node.username) }}
            </div>
            <div class="tips-icon">
              <i
                v-if="node.action.action === 1"
                class="el-icon-success success"
              />
              <i
                v-if="node.action.action === 0"
                class="el-icon-error error"
              />
            </div>
          </div>
        </template>

        <div class="line" />
      </div>

      <!-- 右侧内容区 -->
      <div class="node-content">
        <!-- 节点标题 -->
        <div class="header">
          <template v-if="!node.isUserNode">
            <div class="flex-header">
              <span class="title">
                {{ node.node_name }}
                <span v-if="currentNode?.node_id === node?.node_id" class="current-node">
                  {{ node.assignees.length }}人{{ getNodeApprovalType(node.type) }} {{ status === 'revoke' ? '（已撤销）' : '（审批中）' }}
                </span>
              </span>
              <div
                class="toggle-button"
                :class="{ 'close': !node.nodeCollapse }"
                @click="handleCollapse(node)"
              >
                <i class="iconfont icon-arrow" />
              </div>
            </div>
          </template>

          <template v-else>
            <div class="user-node" style="width: 100%;">
              <div class="u-flex user-node__tips">
                <div>已审批</div>
                <div>{{ timeFormatter(node.action.created_at) }}</div>
              </div>
              <div class="info">
                {{ userId?.id === node.user_id ? '我' : node.username }}
                ({{ node.action.action === 1 ? '已通过' : '已拒绝' }})
              </div>
              <div class="reason-block">
                <span v-if="node.action.comments">
                  {{ node.action.comments }}
                </span>
                <span v-else>
                  {{ node.action.action === 1 ? '同意' : '拒绝' }}
                </span>
              </div>
            </div>
          </template>
        </div>

        <!-- 审批人信息 -->
        <div class="approvers">
          <template v-if="node.nodeCollapse">
            <div
              v-for="(assignee, idx) in node.assignees"
              :key="`${idx}-assignees`"
              class="approver-item"
            >
              <div class="relative" style="width: 40px;height: 40px;">
                <img
                  v-if="assignee.avatar"
                  :src="assignee.avatar"
                  class="avatar"
                >
                <div
                  v-else
                  class="text-avatar"
                >
                  {{ getFirstChar(assignee.username) }}
                </div>
                <div v-if="node.node_status" class="tips-icon">
                  <i
                    v-if="getUserExamineStatus(assignee.user_id, node.action) === 1"
                    class="el-icon-success success"
                  />
                  <i
                    v-if="getUserExamineStatus(assignee.user_id, node.action) === null"
                    class="el-icon-remove waiting"
                  />
                  <i
                    v-if="getUserExamineStatus(assignee.user_id, node.action) === 0"
                    class="el-icon-error error"
                  />
                </div>
              </div>
              <div class="approver-info">
                <span class="name">{{ assignee.username }}</span>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
    <div class="node-item">
      <div class="timeline">
        <div class="end-dot" />
      </div>
      <div class="node-content">
        <div class="end-text">结束</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  props: {
    nodes: {
      type: Array,
      default: () => []
    },
    status: {
      type: String,
      default: ''
    }
  },

  data() {
    return {
    }
  },

  computed: {
    ...mapGetters(['userId']),
    currentNode() {
      return this.nodes.find(item => item.node_status === 'wait')
    }
  },

  methods: {
    getFirstChar(name) {
      return name ? name.charAt(0) : ''
    },

    getNodeApprovalType(type) {
      return type === 'countersign' ? '会签' : '或签'
    },

    isNodeCompleted(node) {
      // 根据实际业务实现
      return false
    },

    getUserExamineStatus(userId, action) {
      const target = action.find(item => item.user_id === userId)
      return target ? target.action : null
    },

    timeFormatter(date) {
      // 实现时间格式化
      return new Date(date).toLocaleString()
    },

    handleCollapse(node) {
      this.$set(node, 'nodeCollapse', !node.nodeCollapse)
    }
  }
}
</script>

<style scoped>
.approval-node-info {
  //padding: 10px;
}

.node-item {
  display: flex;
  margin-bottom: 20px;
}

.timeline {
  position: relative;
  width: 40px;
  margin-right: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dot {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background-color: #2979ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  object-fit: cover;
}

.text-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #2979ff;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  color: white;
}

.tips-icon {
  position: absolute;
  bottom: -4px;
  right: -4px;
  background: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.success { color: #19be6b; }
.waiting { color: #ff9900; }
.error { color: #fa3534; }

.line {
  position: absolute;
  top: 40px;
  width: 2px;
  height: calc(100% - 20px);
  background: #eee;
}

.node-content {
  flex: 1;
}

.flex-header {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.toggle-button {
  transform: rotate(90deg);
  transition: all 0.3s;
  cursor: pointer;
}

.toggle-button.close {
  transform: rotate(0);
}

.approvers {
  margin-top: 10px;
  width: 45%;
  display: flex;
  flex-wrap: wrap;
}

.approver-item {
  width: 25%;
  display: flex;
  align-items: center;
  margin-right: 10px;
  flex-direction: column;
}

.end-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #eee;
}

.end-text {
  color: #999;
  font-size: 16px;
}

/* 其他样式根据需求补充 */

.relative {
  position: relative;
}

.u-flex {
  display: flex;
}

.user-node__tips {
  width: 45%;
  justify-content: space-between;
  color: #b8b8b8;
}

.info {
  margin-top: 10px;
  font-size: 14px;
}

.reason-block {
  margin-top: 10px;
  width: 45%;
  padding: 10px;
  border-radius: 5px;
  background-color: #F3F2F7;
}

.approver-info {
  margin-top: 10px;
  color: #333;
  width: 100%;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
